<template>
	<div class="batterycluster">
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>运行数据</p>
				</div>
				<div class="echats-con">
					<div class="bms">
						{{ $route.query.name }}
					</div>
					<div class="flex">
						<div class="SOC flex">
							<div>SOC</div>
							<div class="imgs">
								<div
									class="imgs_con"
									:style="{
										width: info.YC_59 * (52 / 100) + 'px',
										background: info.YC_59 > 60 ? '#29BC77' : '#FFC70E ',
									}"
								></div>
							</div>
							<div>{{ info.YC_59.toFixed(2) }}%</div>
						</div>
						<div class="SOH flex">
							<div>SOH</div>
							<div class="imgs">
								<div
									class="imgs_con"
									:style="{
										width: info.YC_60 * (52 / 100) + 'px',
										background: info.YC_60 > 60 ? '#29BC77' : '#FFC70E ',
									}"
								></div>
							</div>
							<div>{{ info.YC_60.toFixed(2) }}%</div>
						</div>
					</div>
					<div class="table-yysj">
						<div class="yysj-item flex">
							<div>总电压</div>
							<div>{{ info.ClusterVoltage.toFixed(2) }}V</div>
							<div>SOC</div>
							<div>{{ info.YC_59.toFixed(2) }}%</div>
						</div>
						<div class="yysj-item flex">
							<div>单体最高电压</div>
							<div>{{ info.Max_ClusterVoltage.toFixed(2) }}V</div>
							<div>单体最高温度</div>
							<div>{{ info.Max_CellTemperature.toFixed(2) }}℃</div>
						</div>
						<div class="yysj-item flex">
							<div>单体平均电压</div>
							<div>{{ info.CellVoltage.toFixed(2) }}V</div>
							<div>单体平均温度</div>
							<div>{{ info.CellTemperature.toFixed(2) }}℃</div>
						</div>
						<div class="yysj-item flex">
							<div>单体最低电压</div>
							<div>{{ info.Min_ClusterVoltage.toFixed(2) }}V</div>
							<div>单体最低温度</div>
							<div>{{ info.Min_CellTemperature.toFixed(2) }}℃</div>
						</div>

						<div class="yysj-item flex">
							<div>允许最大充电电流</div>
							<div>{{ info.ChargeCurrent.toFixed(2) }}A</div>
							<div>允许最大放电电流</div>
							<div>{{ info.DichargeCurrent.toFixed(2) }}A</div>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="warning-item">
				<div class="titles">
					<p>今日告警</p>
				</div>
				<div class="echats-con">
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<div class="xfxx-item flex" v-for="item in gjxxList" :key="item.id">
							<div style="flex: 1">
								<span>{{ item.updateTime }}</span>
							</div>
							<div style="flex: 2; border-left: 1px solid #244c8c">
								<span>{{ item.yxName }}</span>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div> -->
			<div class="warning-item">
				<div class="titles">
					<p>电流</p>
				</div>
				<div class="echats-con">
					<electric :id="id" :cname="'电流'" />
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>簇SOC</p>
				</div>
				<div class="echats-con">
					<soc :info="{ xData, yData: yData1, unit: '%', cname: '簇SOC' }" />
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>簇总电压</p>
				</div>
				<div class="echats-con">
					<soc
						:info="{
							xData: xData1,
							yData: yData2,
							unit: 'V',
							cname: '簇总电压',
						}"
					/>
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>遥测数据</p>
					<div class="btns" style="top: 2px">
						<el-input
							size="mini"
							placeholder="输入遥测名称筛选"
							v-model="selectValue"
							clearable
						>
						</el-input>
					</div>
				</div>
				<div class="echats-con">
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<div class="table-yysj">
							<div
								class="yysj-item flex"
								:class="yysj_itemActive == item.index ? 'yysj-itemActive' : ''"
								v-for="item in ycListARR1"
								:key="item.id"
								@click="getYCXX(item)"
							>
								<div>{{ item.ycName }}</div>
								<div>{{ item.value }}</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>遥测运行曲线</p>
				</div>
				<div class="echats-con">
					<soc1
						:info="{
							xData: xData10,
							yData: yData10,
							unit: '',
							cname: '遥测运行曲线',
						}"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import soc1 from "./components/soc1.vue";
import electric from "./components/electric.vue";
import { storageUnitRun, ycList, ycInfo } from "@/api/modules/energyunit";
import { findDataByDevIdAndName } from "@/api/modules/home";
import soc from "./components/soc.vue";
import { getgraph } from "@/api/modules/home.js";

export default {
	components: { soc, soc1, electric },
	props: {},
	data() {
		return {
			id: this.$route.query.id ? this.$route.query.id : "113434415614394369",
			cname: this.$route.query.name ? this.$route.query.name : "簇1",
			timer: "",
			selectValue: "",
			yysj_itemActive: "",
			info: {
				YC_59: 0,
				YC_60: 0,
				ClusterVoltage: 0,
				Max_ClusterVoltage: 0,
				Max_CellVoltage: 0,
				CellVoltage: 0,
				Min_ClusterVoltage: 0,
				ChargeCurrent: 0,
				Max_CellTemperature: 0,
				CellTemperature: 0,
				Min_CellTemperature: 0,
				DichargeCurrent: 0,
			},
			cname: {},
			xData: [],
			xData1: [],
			yData1: [],
			yData2: [],
			ycListARR: [],
			gjxxList: [],
			xData10: [],
			yData10: [],
		};
	},
	watch: {},
	computed: {
		ycListARR1() {
			let self = this;
			return this.ycListARR.filter(function (data) {
				//只返回id是偶数的
				if (self.selectValue) {
					return data.ycName.indexOf(self.selectValue) > -1;
				} else {
					return data;
				}
			});
		},
	},
	mounted() {
		this.getDate(this.id);
		if (this.timer) {
			clearInterval(this.timer);
		} else {
			this.timer = setInterval(() => {
				this.getDate(this.id);
			}, 60000);
		}
	},
	methods: {
		getYCXX(item) {
			let self = this;
			this.yysj_itemActive = item.index;
			self.xData10 = [];
			self.yData10 = [];
			ycInfo({ devId: item.devId, sampleName: item.name }).then((res) => {
				let data = res.data;
				for (let index = 0; index < data.length; index++) {
					let element = data[index];
					self.xData10.push(element.date);
					self.yData10.push(
						element.graphHisDTO ? element.graphHisDTO.value : ""
					); //实时有效功率
				}
			});
		},
		getDate(id) {
			// storageUnitRun({ clusterId: id }).then((res) => {
			// 	if (res.code == 200) {
			// 		this.info = res.data[0];
			// 	}
			// });
			findDataByDevIdAndName({
				devId: id,
				sampleName:
					"YC_59,YC_60,Max_CellVoltage,ClusterVoltage,CellVoltage,Max_ClusterVoltage,Min_ClusterVoltage,ChargeCurrent,Max_CellTemperature,CellTemperature,Min_CellTemperature,DichargeCurrent",
			}).then((res) => {
				if (res.code == 200) {
					this.info = res.data;
				}
			});
			getgraph({ devId: id, sampleName: "YC_59" }).then((res) => {
				let self = this;

				if (res.code == 200) {
					let data = res.data;
					self.xData = [];
					self.yData1 = [];
					for (let index = 0; index < data.length; index++) {
						let element = data[index];
						self.xData.push(element.date);
						self.yData1.push(
							element.graphHisDTO ? element.graphHisDTO.value : ""
						); //实时有效功率
					}
				}
			});
			getgraph({ devId: id, sampleName: "ClusterVoltage" }).then((res) => {
				let self = this;
				if (res.code == 200) {
					let data = res.data;
					self.xData1 = [];
					self.yData2 = [];
					for (let index = 0; index < data.length; index++) {
						let element = data[index];
						self.xData1.push(element.date);
						self.yData2.push(
							element.graphHisDTO ? element.graphHisDTO.value : ""
						); //实时有效功率
					}
				}
			});
			ycList({ devId: id }).then((res) => {
				if (res.code == 200) {
					res.data.forEach((item, index) => {
						item.index = index;
					});
					this.ycListARR = res.data;
					if (this.ycListARR.length > 0) {
						this.getYCXX(this.ycListARR[0]);
					}
				}
			});

			// realtimeInfo({ id: id }).then((res) => {
			// 	if (res.code == 200) {
			// 		this.gjxxList = res.data
			// 	}
			// })
		},
	},
	destroyed() {
		clearInterval(this.timer); //页面销毁时清除定时器
	},
};
</script>
<style lang="scss">
.batterycluster {
	width: 100%;
	/* height: 100%; */

	.warning-top {
		display: flex;
		justify-content: space-around;
		position: relative;
		gap: 40px 20px;
		margin-bottom: 20px;

		.warning-item {
			height: 330px;
			flex: 1;

			.echats-con {
				width: 100%;
				height: calc(100% - 52px);
				justify-content: space-around;

				.xfxx-item {
					width: calc(100% - 40px);
					min-height: 30px;
					margin: 5px 13px 0 13px;

					position: relative;

					background: rgba(255, 255, 255, 0.01);
					border-radius: 0px 0px 0px 0px;
					border: 1px solid #244c8c;

					div {
						padding-left: 10px;
					}

					span {
						font-weight: 400;
						font-size: 12px;
						color: #ffffff;
						line-height: 30px;
						text-align: left;
					}
				}

				.xfxx-itemred {
					background: rgba(128, 31, 1, 0.41);
					border-radius: 0px 0px 0px 0px;
					border: 1px solid rgba(128, 31, 1, 1);
				}

				.yysj-itemActive {
					background: #46559d;
				}

				.bms {
					height: 36px;
					margin: 15px auto;
					background: linear-gradient(
						270deg,
						rgba(17, 106, 229, 0) 0%,
						rgba(17, 106, 229, 0.2) 53%,
						rgba(17, 106, 229, 0) 88%
					);
					border-radius: 0px 0px 0px 0px;
					border: 1px solid;
					border-image: linear-gradient(
							270deg,
							rgba(17, 106, 229, 0),
							rgba(83, 204, 255, 0.6),
							rgba(17, 106, 229, 0)
						)
						1 1;
					width: 80px;
					font-size: 16px;
					color: #ffffff;
					line-height: 36px;
					text-align: center;
				}

				.SOC,
				.SOH {
					flex: 1;
					justify-content: center; // 内容自适应：上下居中
					align-items: center; // 子项对齐方式：左右居中
					width: 35px;

					font-size: 16px;
					color: #ffffff;

					.imgs {
						background-image: url(./../../assets/img/Group_4.png);
						width: 66px;
						height: 36px;
						background-size: cover;
						background-repeat: no-repeat;
						margin: 0 20px;
						position: relative;

						.imgs_con {
							position: absolute;
							height: 24px;
							left: 6px;
							top: 6px;
						}
					}
				}

				.yxzt {
					margin: 10px 0;
					width: 117px;
					height: 284px;
					background: rgba(4, 4, 4, 0.47);
					border-radius: 4px 4px 4px 4px;

					.yxzt_title {
						margin-top: 30px;
						height: 22px;
						font-size: 16px;
						color: #ffffff;
						line-height: 19px;
						text-align: center;
					}

					.imgs {
						height: 120px;
						width: 65px;
						margin: 20px auto;
						background-image: url(./../../assets/img/Group_3.png);
						background-size: cover;
						background-repeat: no-repeat;
						position: relative;

						.conten {
							width: 50px;
							background: #29bc77;
							position: absolute;
							bottom: 8px;
							left: 7px;
							height: 50px;
						}
					}

					.bxjgcon {
						height: 22px;
						font-weight: 500;
						font-size: 16px;
						color: #ffffff;
						line-height: 19px;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>
